﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- saved from url=(0014)about:internet -->
<title>Getting Started with Oomph: Microformats Tools</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" media="screen" title="light-theme" href="oomphcss/light.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="dark-theme" href="oomphcss/dark.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="oomphcss/blue.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="notebook-theme" href="oomphcss/notebook.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="grunge-theme" href="oomphcss/grunge.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="basicDark_fixed" href="oomphcss/basicDark_fixed.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="basicDark_auto" href="oomphcss/basicDark_auto.css"/>
<link href="oomphcss/main.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="https://visitmix.com/labs/oomph/2.0/client/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="https://visitmix.com/labs/oomph/2.0/client/oomph.min.js"></script>

<script type="text/javascript">

function setStyle(title){ 
	var i, cache, alt=[""]
	for(i=0; (cache=document.getElementsByTagName("link")[i]); i++) {
		if(cache.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cache.getAttribute("title")) { 
			cache.disabled = true
			alt.push(cache) 
			if(cache.getAttribute("title") == title) 
				cache.disabled = false 
		}
	}
}

</script>
<style type="text/css">
</style>
</head>

<body>
<div id="mainWrapper">
	<div id="gleamCallout">
		<img alt="Gleam" height="74" src="oomphcss/oomphimages/gleamCallout.png" width="169" />
	</div>


		<!-- <div id="oomphGraphic">
			<img alt="Oomph" height="312" src="oomphcss/oomphimages/oomphInstaller.gif" width="164" />
		</div> -->

		<h1>Oomph Microformats Tools</h1>
		<p>
		Oomph is a new way to create, style, and consume <a href="http://visitmix.com/Articles/Microformats-The-Quiet-Revolution">microformats</a>.  You can get started using these tools right away.
		</p>

		<ul>
			<li><h2>Consume</h2>
			Consume and use microformats on any page by clicking the gleam that appears in the upper-left of your screen!  Popular sites like <a href="http://upcoming.org">Upcoming</a>, <a href="http://www.eventful.org">Eventful</a>, and <a href="http://www.linkedin.com">LinkedIn</a> support microformats.
			</li>

			<li>
			<h2>Style</h2>
			Style your microformats using the <a href="switcher.html">CSS styles for microformats</a>.  Take our styles and extend them ... make them your own!
			</li>

			<li>
			<h2>Create</h2>
			Create microformats on your own web pages, using the Windows Live Writer plugin -- use the plug-in to create contact cards to use on your blog.
			</li>
		</ul>

		<p>
		To learn more about microformats, read John Allsopp&#39;s <a href="http://visitmix.com/Articles/Microformats-The-Quiet-Revolution">excellent introduction to microformats</a> and check out <a href="http://www.microformats.org/">microformats.org</a>.  When you are ready to participate in the community, visit the <a href="http://www.codeplex.com/Oomph">Oomph open source project on CodePlex</a>, where you can view and modify any of the tools featured here.
		</p>


		<!-- THIS STARTS THE NAVIGATION -->
		<!-- THIS STARTS THE NAVIGATION -->
		<div style="margin-top:20px; border-top:1px solid #666666;">
			<h2>Oomph Microformat Styles</h2>

			<div class="floatLeft">
				<div id="cssNav">
					<ul>
						<li><a href="javascript:setStyle('light-theme')" >Light Rounded-Corners</a><br/>
						<span class="downloadLinks"><a href="oomphcss/light.css">light-theme.css</a></span>
						</li>

						<li><a href="javascript:setStyle('dark-theme')">Dark Rounded-Corners</a><br/>
						<span class="downloadLinks"><a href="oomphcss/dark.css">dark-theme.css</a></span>
						</li>

						<li><a href="javascript:setStyle('blue-theme')">Blue Rounded-Corners</a><br/>
						<span class="downloadLinks"><a href="oomphcss/blue.css">blue-theme.css</a></span>
						</li>

						<li><a href="javascript:setStyle('notebook-theme')">Notebook</a><br/>
						<span class="downloadLinks"><a href="oomphcss/notebook.css">notebook-theme.css</a></span>
						</li>

						<li><a href="javascript:setStyle('grunge-theme')">Grunge</a><br/>
						<span class="downloadLinks"><a href="oomphcss/grunge.css">grunge-theme.css</a></span>
						</li>

						<li><a href="javascript:setStyle('basicDark_fixed')" >Basic Dark Fixed-Width</a><br/>
						<span class="downloadLinks"><a href="oomphcss/basicDark_fixed.css">basicDark_fixed.css</a></span>
						</li>
	
						<li><a href="javascript:setStyle('basicDark_auto')">Basic Dark Auto-Width</a><br/>
						<span class="downloadLinks"><a href="oomphcss/basicDark_auto.css">basicDark_auto.css</a></span>
						</li>
					</ul>
				</div>
			</div>

			<div class="floatLeft">
			<!-- THIS STARTS THE hCARD -->
			<!-- THIS STARTS THE hCARD -->
			<!-- THIS STARTS THE hCARD -->
				<div id="hcard" class="vcard">
			 	<!-- HCARD PHOTO -->
			 	<!-- HCARD PHOTO -->
					<div class="photo">
						<img alt="Avatar" height="64" src="oomphcss/oomphimages/avatar_64.jpg" width="64" />
					</div>
	 	
			 	<!-- HCARD CONTENT CONTAINER. "container" IS NOT A hCARD STYLE. -->
	 			<!-- HCARD CONTENT CONTAINER. "container" IS NOT A hCARD STYLE. -->
					<div class="container">
		 				<!-- PERSON NAME -->
		 				<!-- PERSON NAME -->
						<div class="fn full-name">
							<span class="given-name">First</span>
						  	<span class="additional-name">Middle</span>
						  	<span class="family-name">Last</span>
						</div>

						<!-- COMPANY NAME -->
				 		<!-- COMPANY NAME -->
						<div class="org">Company Name</div>
				 		<!-- WEBSITE URL -->
				 		<!-- WEBSITE URL -->
							<div><a class="url" href="http://thunderkick.us">http://visitmix.com</a></div>
					 		<!-- EMAIL -->
					 		<!-- EMAIL -->
					 		<a class="email" href="mailto:timaidlin@hotmail.com">info@visitmix.com</a>
	 		
							<!-- ADDRESS -->
							<!-- ADDRESS -->	 
	 						<div class="adr">
	 							<div class="street-address">1 Microsoft Way</div>
	 							<span class="locality">Redmond</span>
								<span class="region">WA</span>
								,
								<span class="postal-code">98052</span>
								<div class="country-name">USA</div>
							</div> 
			 
						 	<!-- TELEPHONE -->
						 	<!-- TELEPHONE -->
							<div class="tel">
						 	    <span class="type">home</span> <span class="value-title" title="+1-206-555-1212">206.555.1212</span>
                            </div>
							<!-- THIS SECTION CONTAINS THE PERSONS LINKS AND TAGS.  THE CLASS "linksAndTags" is not a Microformat tag.-->	 
							<!-- THIS SECTION CONTAINS THE PERSONS LINKS AND TAGS.  THE CLASS "linksAndTags" is not a Microformat tag.-->	 
							<div class="linksTags">
					 			<a class="url" href="aim:goim?screenname=aimscreenname">AIM</a>
					 			<a class="url" href="ymsgr:sendIM?yimscreenname">YIM</a>
					 			<a class="url" href="xmpp:jabberscreenname">Jabber</a>
								<div class="tags">
									<a href="http://kitchen.technorati.com/contacts/tag/tag1">tag1</a> <a href="http://kitchen.technorati.com/contacts/tag/tag2">tag2</a> <a href="http://kitchen.technorati.com/contacts/tag/tag3">tag3</a>
								</div>
							</div>
							<!-- THIS SECTION CONTAINS THE PERSONS LINKS AND TAGS.  THE CLASS "linksAndTags" is not a Microformat tag.-->	 
							<!-- THIS SECTION CONTAINS THE PERSONS LINKS AND TAGS.  THE CLASS "linksAndTags" IS NOT A MICROFORMAT TAG.-->	
						</div>
						<!-- HCARD CONTENT CONTAINER -->
					 	<!-- HCARD CONTENT CONTAINER -->
					</div>
					<!-- THIS ENDS THE hCARD -->
					<!-- THIS ENDS THE hCARD -->
					<!-- THIS ENDS THE hCARD -->

					<!-- THIS BEGINS THE FOOTER.  CLASS "footer" IS NOT A MICROFORMAT TAG. -->
					<div class="footer"></div>
				<!-- THIS CLOSES "FLOATLEFT" -->
			</div>	

			<!-- THIS STARTS THE hCALENDAR -->
			<!-- THIS STARTS THE hCALENDAR -->
			<div class="floatLeft">
				<div class="vevent">
					<div class="eventContainer">
						<h3 class="summary">XYZ Project Review</h3>
						<p class="description">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nec mi. Aliquam mollis. Donec justo erat, condimentum sit amet, interdum nec, egestas at, purus. In aliquet.
						</p>

						<p>
						To be held on  <span class="dtstart">
            <span class="value-title" title="1998-03-12T08:30:00-05:00">
            </span>
            12 March 1998 from 8:30am EST
            </span>
						</p>

						<p>
						Location: <span class="location">Seattle, WA</span>
						</p>
					
						<small>
						Booked by: <span class="uid">guid-1.host1.com</span> on <abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 6:00pm</abbr>
						</small>
					</div>
				</div>
				
				<div class="footer"></div>
			</div>
		</div>
	<div style="clear:both; border-top:1px solid #666;"></div>
	<div class="floatLeft" style="width:200px;">
	<h2>hMedia Audio</h2>
    <ul>
        <li>
        <div class="hmedia">
        <span class="fn"><a rel="enclosure" href="http://www.rhizohm.net/music/carp.spawn.mp3">Carp Spawn</a> </span><span>by </span><span class="contributor"><a href="http://rhizohm.net">Rhizohm</a> </span>
        </div>
        </li>

        <li>
        <div class="hmedia">
			<span class="fn"><a rel="enclosure" href="http://www.rhizohm.net/music/greenification.mp3">Greenification</a></span> <span>by </span><span class="contributor"><a href="http://rhizohm.net">Rhizohm</a></span>
		</div>
        </li>
	</ul>
	</div>
	
		<div class="floatLeft" style="width:200px;">
	<h2>hMedia Video</h2>
    <ul>
		<li>
			<div class="hmedia">
				<span class="fn"><a rel="enclosure" type="video/wmv" href="http://silverlight.services.live.com/16371/tetris_flotzam/video.wmv">Tetris Flotzam</a> </span>
			</div>
        </li>
    </ul>
	</div>

	<div class="floatLeft" style="width:200px;">
	<h2>hMedia Image</h2>
            <div class="hmedia"><span class="fn">Oomph from MIX Online</span>
            <img src="oomphcss/oomphimages/oomphInstaller.gif" class="photo" style="width:164px; height:312px; margin:0;" />
            </div>
</div>
	</div>
	
	
</body>
</html>